<template>
	<view>
		<!-- 页面加载 loading start-->
		<fu-loading v-if="isShowLoading"></fu-loading>
		<!-- 页面加载 loading end-->
		<view class="flex flex-direction align-center padding-lr " v-else>
			<image :src="imgWechatUrl+'/index/customer.png'" mode="aspectFill" class="cover-img margin-tb-xl"></image>
			<view class="phone-num">
				{{service_info.service_phone || '------'}}
			</view>
			<view class="text-666 text-df margin-top">
				工作时间：{{service_info.service_date  || '------'}}
			</view>
			<view class="btn-normal">
				<button type="default " class="bg-theme" @click="callPhone">拨打电话</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowLoading:true,
				imgWechatUrl: this.imgWechatUrl,
				service_info: {}
			}
		},
		onLoad() {
			this.getCustomerPhone()
		},
		
		methods: {
			callPhone() {
				this.$util.throttle(this.callFun, 2000, true);
			},
			callFun() {
				// 拨打电话
				if (!this.service_info.service_phone) {
					this.$message.info('获取客服电话失败');
				}
				uni.makePhoneCall({
					phoneNumber: this.service_info.service_phone,
					fail: () => {
						this.$message.info('唤起拨号失败,请确认已开通相关权限');
					},
					complete: () => {
						console.log('调起成功');
					}
				});
			},
			// 获取客服电话以及图片
			getCustomerPhone() {
				this.$api
					.post(global.apiUrls.postSystemConfig, {
						store_id:1
					})
					.then((res) => {
						this.isShowLoading = false;
						res = res.data;
						if (res.code == 1) {
							this.service_info = res.data
							console.log(this.service_info,"this.service_info")
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.cover-img {
		width: 334rpx;
		height: 334rpx;
	}

	.phone-num {
		font-size: 40rpx;
		color: #333333;
	}

	.btn-normal {
		width: 100%;
		margin-top: 100rpx;

		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			opacity: 1;
			border-radius: 50rpx;
			color: #FFFFFF;

			&::after {
				border: none;
			}
		}
	}
</style>
